<template>
    <div class="renqi">
        <h1>人气推荐</h1>
        <ul>
            <li v-for="item in hotGoodsList" :key="item.id">
                <b>
                    <img :src="item.list_pic_url" alt="" />
                </b>
                <h2>{{ item.name }}</h2>
                <p>{{ item.goods_brief }}</p>
                <span>{{ item.retail_price | formatPrice }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    props: ['hotGoodsList'],
};
</script>

<style lang="less" scoped>
.renqi {
    h1 {
        font-size: 18px;
        margin: 10px;
        text-align: center;
    }
    ul {
        li {
            background-color: #fafafa;
            margin-bottom: 10px;
            overflow: hidden;

            b {
                display: block;
                width: 30%;
                float: left;
                height: 80px;
                margin-left: 10px;
                padding-left: 10px;
                box-sizing: border-box;
                img {
                    // float: left;
                    width: 80%;
                    margin: auto;
                }
            }
            h2 {
                font-size: 18px;
                margin-top: 5px;
            }
            p {
                font-size: 13px;
                margin-top: 15px;
            }
            span {
                color: red;
                margin-top: 15px;
                display: block;
                font-size: 10px;
                margin-bottom: 10px;
            }
        }
    }
}
</style>
